<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2-01 矩形rect</title>
</head>
<body>
  <svg width="500" height="500">
    <!--
      x和y: 起始点坐标
      width: 宽度
      height: 高度
      fill: 填充色
      fill-opacity: 填充色的不透明度（0~1）
      stroke: 描边颜色
      stroke-width: 描边宽度
      stroke-opacity: 边框颜色的不透明度
      stroke-dasharray: 边框阵列（虚线）
      rx: 圆角，x轴的半径
      ry: 圆角，y轴的半径
    -->
    <rect
      x="100"
      y="100"
      width="100"
      height="100"
      fill="pink"
      fill-opacity="0.8"
      stroke="red"
      stroke-width="4"
      stroke-opacity="0.6"
      stroke-dasharray="22, 6, 10"
      rx="10"
      ry="20"
    ></rect>
  </svg>
</body>
</html>